<template>
  <button @click="saveChartDesignerData">保存</button>
  <div id="chartDesigner2" style="width: 100%; height: 100%"></div>
</template>
<script setup>
import {onMounted} from 'vue';

import axios from "axios";
import {spjdxsResults_chartDesigner_2}  from "@/views/chartDesigner/spjdxsResultsResponse_data_chartDesigner_2.js"
import {spqyxsResults_chartDesigner_2} from "@/views/chartDesigner/spqyxsResultsResponse_data_chartDesigner_2.js";
import {onUpdateDatasetlist_rtn_chartDesigner_2} from "@/views/chartDesigner/onupdatedatasetlist_chartDesigner_2.js";
let designer;
let report;
let onUpdateData_rtn=[spjdxsResults_chartDesigner_2,spqyxsResults_chartDesigner_2];

//数据集

console.log("chartDesigner_2,results  datasetlist:",onUpdateDatasetlist_rtn_chartDesigner_2);
console.log("chartDesigner_2,onUpdataData_rtn:",onUpdateData_rtn);
let option = { //参数配置说明 根据您的需求填写option
  uploadImage: { //上传图片相关信息 如果不传该字段时，设计器用到的所有上传图片配置项均不显示。
    server: "url",//上传图片地址
    method: "post",//上传图片请求方式
    headers: { //上传图片请求头
      "Authorization": "Token XXXXXXXX"
    },
    fieldName: "file",
    resultField: "file"
  },
  pageData: { //画布初始化时的宽高
    width: '1920px',
    height: '1080px'
  },
  dataSet: [ //数据集按钮的方式
    { //Json数据
      id: 1,
      value: "新建Json数据集"
    },
    { //http请求数据
      id: 2,
      value: "新建Http接口数据集"
    },
    { //API服务数据
      id: 3,
      value: "API服务数据集"
    },
    {
      id: 4,
      value: "外部数据集"  //  新建一个新的报表实例，如果希望可以预先动态从后台提供几个数据集供其使用，这个配置必须有；
      // 然后只要动态的从后台拿到n个数据集，全部用 results格式装配，onUpdateDatasetList方法来触发
    }
  ]

}


//预先提供：以外部数据源的方式，动态请求来提供‘候选数据集列表’
function onUpdateDatasetList() {
  console.log("...chartdesigner_2.vue....onUpdateDatasetList  is called")

  return new Promise((resolve, reject) => {

    resolve(onUpdateDatasetlist_rtn_chartDesigner_2)

  })
}

option.onUpdateDatasetList = onUpdateDatasetList

//正常应该是和报表设计器一样，这里的x个表结构，对于报表设计器/bi设计器来说，是外部数据源的待选数据集列表


function onUpdateData(datasets, params) {
  console.log("...chartdesigner_2.vue....onUpdateData is called,",datasets,params);
  return new Promise((resolve, reject) => {
    resolve(onUpdateData_rtn)

  })
}

 function fetchChartDesignerInstance(){
   axios({
    method: "post",
    url: "/api/xzchartdesigner/report2/report",
    data: {
      reportType: "chartDesigner",
      reportId: 'report2',
    }
  }).then((response) => {
    report = response.data.data.report;
    designer = new XZChartDesigner("#chartDesigner2", option, report);

  }).catch((error) => {

    console.log('onMounted->axios->error',error);
  })
}
option.onUpdateData = onUpdateData



onMounted(async() => {
 await fetchChartDesignerInstance();
})

let chartDesignerReportData;

function saveChartDesignerData() {
  chartDesignerReportData = designer.getSaveData();
  console.log("...chartdesigner_2.vue....designer.getSaveData:",chartDesignerReportData)
  console.log("....chartdesigner_2.vue.....designer.getSaveData().config:",designer.getSaveData().config)
  console.log("....chartdesigner_2.vue.....designer.getSaveData().data.dataConfig:",designer.getSaveData().data.dataConfig);

}

const canvasclassname = "xzchart-mCanvas"
const canvasheight = "1024px"

function setcanvasHight() {
  let canvas = document.getElementsByClassName(canvasclassname)[0]
  canvas.style.height = canvasheight
}
</script>

<style scoped>

</style>
